<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
            line-height: 40px;
        }
    </style>
</head>
<!-- v-for 案例 -->

<body>
    <div id="app">
    
        <div>
            <h3>搜索列表</h3>
            <div>
                <label for="input">输入搜索条件：</label>
                <input id="input" name="search" type="text" v-model="searchValue" placeholder="输入搜索条件" @keyup.enter="search" />
            </div>
            <div>
                <h3>排序</h3>
                <!-- 点击的时候，修改 orderType 值 -->
                <button @click="orderType = 1">年龄升序</button>
                <button @click="orderType = 2">年龄降序</button>
                <button @click="orderType = 0">还原</button>
            </div>
            
            <ul>
                <li v-for="(p, index) in filterPersons">{{index + 1}} - 姓名 ： {{p.name}} - 年龄 ： {{p.age}} - 地址 ： {{p.address}}</li> 
            </ul>
        </div>
        

    </div>
    <script src="js/vue.js"></script>

    <script>
        const HelloVue = {
            data() {
                return {
                    // 关联输入框
                    searchValue:'',
                    // 排序标记 0: 默认， 1：升序， 2：降序
                    orderType: 0,
                    persons:[
                        {'name': '张三', age: 20, address:'武汉'},
                        {'name': '李四', age: 22, address:'北京'},
                        {'name': '王五', age: 24, address:'广州'},
                        {'name': '赵六', age: 21, address:'重庆'},
                        {'name': '苏小妹', age: 18, address:'西安'},
                        {'name': '张三', age: 21, address:'武汉'},
                        {'name': '李四', age: 22, address:'北京'},
                        {'name': '王五', age: 24, address:'广州'},
                        {'name': '赵六', age: 21, address:'重庆'},
                        {'name': '苏小妹', age: 20, address:'西安'},
                        {'name': '张三', age: 29, address:'武汉'},
                        {'name': '李四', age: 22, address:'北京'},
                        {'name': '王五', age: 24, address:'广州'},
                        {'name': '赵六', age: 21, address:'重庆'},
                        {'name': '苏三妹', age: 18, address:'西安'},
                    ]
                }
            },
            computed: {
                filterPersons(){
                    // 1. 取出相关属性
                    const {persons, searchValue, orderType} = this;

                    // 2. 定义过滤数组
                    let arr = [...persons]; // 通过展开操作，深拷贝一个数组出来

                    // 3. 搜索
                    if(searchValue.trim()){
                        arr = arr.filter( p => p.name.indexOf(searchValue) > -1);
                    }

                    // 4. 排序
                    if(orderType){
                        if (orderType == 1) { // 1：升序
                            arr = arr.sort( (p1, p2) => p1.age - p2.age );
                        } else if (orderType == 2) { // 2：降序
                            arr = arr.sort( (p1, p2) => p2.age - p1.age );
                        }
                        
                    }

                   return arr;
                }
            },
            methods: {
                search(){
                    console.log(this.searchValue, this.orderType);
                },
            }
        };

        const app = Vue.createApp(HelloVue).mount("#app");
    </script>
</body>

</html>